<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--在文本框上按回车可以查找-->
			<input type="text" v-model="keywords" @keyup.enter="onEnterKeyUp()" />
			<!--点击按钮可以查找-->
			<button @click="onSearch">搜索</button>
			<div>查找的关键字：{{keywords}}</div>

			<h3>单选按钮</h3>
			<input type="radio" :value="true" v-model="sex">男</input>
			<input type="radio" :value="false" v-model="sex">女</input>
			<h1>sex:{{sex}}</h1>


			<h3>选择框</h3>
			<!-- 选择框 -->
			<select v-model="orderStatus" style="height:30px">
				<option :value="0">未付款</option>
				<option :value="1">已付款</option>
				<option :value="2">已发货</option>
				<option :value="3">已签收</option>
			</select>
			<h1>orderStatus:{{orderStatus}}</h1>

			<h3>检测框</h3>
			<input type="text" placeholder="请输入用户名"><br />
			<input type="password" placeholder="请输入密码"><br />
			<label><input type="checkbox" v-model="isAgree">同意</label></br>
			<button :disabled="!isAgree">注册</button>
			<h1>isAgree:{{isAgree}}</h1>
			
			
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					keywords: "macbook i5",
					sex: false,
					//0:未付款  1:已付款  2:已发货 3:已签收					
					orderStatus: 1,
					isAgree: false //表示不同意
				},
				methods: {
					onSearch() {
						console.log(`查找 ${this.keywords} 相关的内容...`);
					},
					onEnterKeyUp() {
						console.log(`触发了回车键...`);
						//调用对应的函数		
						this.onSearch();
					},
				},
				//想变量keywords只要被更改，就重新执行一次搜索		
				watch: {
					keywords() {
						console.log("自动调用一次watch中的keywords函数...");
						this.onSearch();
					},
				},
			});
		</script>
	</body>
</html>
